<template>
	<view :class="[`grid-columns-${props.col}`,`grid-gap-${props.gap}`]">
		<view class="grid-column-1 flex flex-column grid-gap-2 flex-center" v-for="(item,index) in list" :key="index"
		@tap="$page.ads(item)">
			<image
				:src="item.image"
				mode="scaleToFill"
				:style="style"
				class="x-grid-image"
			/>
			<text class="h9 font-weight-500">{{WebConfigStore.replaceIndustryPersonnelName(item.title)}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import {$api,$page} from '@/utils'
import {  ref,onMounted,nextTick,defineProps } from "vue";
import { useWebConfigStore } from "@/stores";
const WebConfigStore=useWebConfigStore();
const props = withDefaults(defineProps<{
	position: string
	height?: number|string
	rounded?: number|string
	col?: number|string
	gap?: number|string
}>(), {
	position: '',
	height: 30,
	rounded: 0,
	col:5,
	gap:0
});
const emit = defineEmits(['loaded','update:show']);
const style=ref({
	height: props.height + 'px',
	width:props.height + 'px',
	'--radius': props.rounded + 'px'
});
const list=ref<AdsInterface[]>([]);
onMounted(()=>{
	$api.Ads.ads(props.position).then((res:any)=>{
		list.value=res;
		emit('update:show',true)
		nextTick(()=>{
			emit('loaded')
		})
	}).catch(()=>{
		list.value=[];
		emit('update:show',false)
		emit('loaded')
	})
})
</script>

<style lang="scss" scoped>
.x-grid-image {
	border-radius: var(--radius);
}
</style>